<template>
  <div v-if="homenonetype && searchValue.length == 0" class="homenone">
    <slot name="homenonedata">
      <div class="homenone_box">
        <img :src="
          OfficeGlobal.homehomenoneimg
            ? OfficeGlobal.homehomenoneimg
            : 'https://vrar-obs-production.obs.cn-north-4.myhuaweicloud.com/ssc-develop/ppt/用户ID/ThumbnailImgiUrhm3.png?id=KW5W4r'
        " alt="" @click="createContent" />
        <!-- <button class="homenone_btn">立即创建</button> -->
      </div>
    </slot>
  </div>
  <div v-else class="deletebox" @contextmenu.prevent.stop="globalClickRight($event)" @click.stop="glabalClickEvent">
    <rightMenuComponent :currentItemObj="currentActionInfo.currentItemInfo" :currentMultipleList="currentMultipleList"
      class="rightMenuid" :menuPosX="menuPosX" :menuPosY="menuPosY" :itemMenuShow="itemMenuShow"
      :globalRightMenuShow="globalRightMenuShow" :menuList="menuList" :shareUrl="fareurl" :isMoreSelect="isMoreSelect"
      :isCoppied="isCoppied" componentsFrom="home" @newCreate="newCreate" @selectAll="selectAll" @refurbish="refurbish"
      @menuShareMember="menuShareMember" @cancleSelect="cancleSelect" @reName="reName" @paste="paste"
      @copyFile="copyFile" @xiazaipptx="xiazaipptx" @xiazaipdf="xiazaipdf" @xiazaijpg="xiazaijpg"
      @deleteSeleted="deleteSeleted" @deleteItem="deleteItem">
    </rightMenuComponent>
    <!-- 下载暴露出去 -->
    <!-- 头部 -->
    <div class="del_top" :style="{
      paddingLeft: OfficeGlobal.homesharelimargin + 20 + 'px',
      paddingRight: OfficeGlobal.homesharelimargin + 20 + 'px',
    }" v-show="homeshow || sousuo || sousuostop">
      <slot name="TopLeftslot">
        <div class="del_topleft">
          <button class="empty" v-if="OfficeGlobal.homehomeqingkong">
            <i class="appIcon-iconfont appIcon-sousuo"></i>
            <span class="emptytitle">清空</span>
          </button>
        </div>
      </slot>
      <div class="del_topcenter"></div>
      <div class="del_topright">
        <!-- 搜索 -->
        <div class="sousuoxin">
          <input autocomplete="off" id="sousuoinp" class="shareTopinp" :class="sousuo ? 'inpxin' : ''"
            v-model="searchValue" placeholder="搜索项目名称" />
          <div class="searchclass" @click="sousuoFn" :style="{
            background: sousuo
              ? OfficeGlobal.homeshareTopshousuo
                ? OfficeGlobal.homeshareTopshousuo
                : '#686CE8'
              : '',
            fontSize: OfficeGlobal.homeshareTopiconsize
              ? OfficeGlobal.homeshareTopiconsize + 'px'
              : '18px',
            borderRadius: sousuo ? '0 21px 21px 21px' : '',
          }">
            <i class="appIcon-iconfont appIcon-sousuo-xin" :style="{
              fontSize: OfficeGlobal.homeshareTopiconsize
                ? OfficeGlobal.homeshareTopiconsize + 'px'
                : '18px',
              color: sousuo ? '#ffffff' : '',
            }"></i>
          </div>
        </div>
        <!-- 列表切换 -->
        <div class="list_chart" @click="changetype(2)" v-if="type == 1 && OfficeGlobal.homelistswitch" :style="{
          color: OfficeGlobal.homeshareTopiconcolor
            ? OfficeGlobal.homeshareTopiconcolor
            : '#000',
        }">
          <i class="appIcon-iconfont appIcon-liebiao title" :style="{
            fontSize:
              OfficeGlobal.homeshareTopiconsize + 'px'
                ? OfficeGlobal.homeshareTopiconsize + 'px'
                : '18px',
          }"></i>
        </div>
        <div class="list_chart" @click="changetype(1)" v-if="type == 2 && OfficeGlobal.homelistswitch" :style="{
          color: OfficeGlobal.homeshareTopiconcolor
            ? OfficeGlobal.homeshareTopiconcolor
            : '#000',
        }">
          <i class="appIcon-iconfont appIcon-kapianmoshi title" :style="{
            fontSize: OfficeGlobal.homeshareTopiconsize
              ? OfficeGlobal.homeshareTopiconsize + 'px'
              : '18px',
          }"></i>
        </div>
        <!-- 排序 -->
        <div class="list_chart">
          <i v-if="officeSortRule == 3" class="appIcon-iconfont appIcon-paixu title" :style="{
            fontSize: OfficeGlobal.homeshareTopiconsize
              ? OfficeGlobal.homeshareTopiconsize + 'px'
              : '14px',
          }"></i>
          <i v-if="officeSortRule == 1 && officeSortType == 1"
            class="appIcon-iconfont appIcon-chuangjianshijianzhengxu title" :style="{
              fontSize: OfficeGlobal.homeshareTopiconsize
                ? OfficeGlobal.homeshareTopiconsize + 'px'
                : '14px',
            }"></i>
          <i v-if="officeSortRule == 1 && officeSortType == 2"
            class="appIcon-iconfont appIcon-chuangjianshijiandaoxu title" :style="{
              fontSize: OfficeGlobal.homeshareTopiconsize
                ? OfficeGlobal.homeshareTopiconsize + 'px'
                : '14px',
            }"></i>
          <i v-if="officeSortRule == 2 && officeSortType == 1"
            class="appIcon-iconfont appIcon-xiugaishijianzhengxu title" :style="{
              fontSize: OfficeGlobal.homeshareTopiconsize
                ? OfficeGlobal.homeshareTopiconsize + 'px'
                : '14px',
            }"></i>
          <i v-if="officeSortRule == 2 && officeSortType == 2" class="appIcon-iconfont appIcon-xiugaishijiandaoxu title"
            :style="{
              fontSize: OfficeGlobal.homeshareTopiconsize
                ? OfficeGlobal.homeshareTopiconsize + 'px'
                : '14px',
            }"></i>
          <i v-if="officeSortRule == 4 && officeSortType == 1"
            class="appIcon-iconfont appIcon-biaotimingchengzhengxu title" :style="{
              fontSize: OfficeGlobal.homeshareTopiconsize
                ? OfficeGlobal.homeshareTopiconsize + 'px'
                : '14px',
            }"></i>
          <i v-if="officeSortRule == 4 && officeSortType == 2"
            class="appIcon-iconfont appIcon-biaotimingchengdaoxu title" :style="{
              fontSize: OfficeGlobal.homeshareTopiconsize
                ? OfficeGlobal.homeshareTopiconsize + 'px'
                : '14px',
            }"></i>
          <div class="toolpaixu">
            <ul class="toolpaixuul">
              <li class="toolpaixuli" :style="{
                color: item.index === officeSortRule ? '#4355DC' : '#fff',
              }" v-for="(item, index) in paixulistData" :key="index" @click="paixuFn(item)">
                <dd>{{ item.item }}</dd>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 图表--删除 -->
    <div class="del_chartlist" v-if="props.home == 'del' && type == 1">
      <ul>
        <li v-for="(item, index) in dataList" :key="index" :class="[
          `animate__animated animate__fadeInUp animate__delay-0${index % 5}s`,
          currentMultipleList
            .map((val) => {
              return val.officeId;
            })
            .includes(item.officeId)
            ? 'multiple_select'
            : '',
        ]" @contextmenu.prevent.stop="itemClickRight($event, item)" @click.stop="cardItemCilck(item)">
          <!-- :style="`background:${item.params.bgColor}`" -->
          <div class="box conentbox" :style="`height:${height}px`">
            <img src="https://img1.baidu.com/it/u=3384796346,381674655&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" />
            <!-- <div class="checkbox groupbox" @click="checkboxChange(item.officeContentId)" v-if="showCheckbox">
                            <i class="appIcon-iconfont appIcon-weixuan check-icon" v-if="!checkboxValue.has(item.officeContentId)"></i>
                            <i class="appIcon-iconfont appIcon-duoxuan check-icon" v-if="checkboxValue.has(item.officeContentId)"></i>
                        </div> -->
            <!-- <div class="edit">
                            <dd class="listRestore" @click="huanyuanFn">
                                <i class="appIcon-iconfont appIcon-guanbijianli"></i>
                            </dd>
                            <dd class="listRestore" @click="shanchuFn">
                                <i class="appIcon-iconfont appIcon-a-trash11"></i>
                            </dd>
                        </div> -->
            <!-- <div class="mask"></div> -->
          </div>
          <dl class="name_inp" :style="{ justifyContent: OfficeGlobal.hometitlejustifyContent }">
            <p>{{ item.officeTitle }}</p>
          </dl>
        </li>
      </ul>
    </div>
    <!-- 图表--首页 -->
    <div class="del_chartlist" v-if="props.home == 'home' && type == 1">
      <ul id="scorl" :style="{ paddingBottom: OfficeGlobal.homehomebottomjiahao ? '' : '0' }">
        <li v-show="OfficeGlobal.homehomenewcard && show" @click="createContent" class="homenew ulli" :style="{
          margin: OfficeGlobal.homesharelimargin
            ? OfficeGlobal.homesharelimargin + 'px'
            : '20px',
          width: imgwidth + 'px',
          height: height + 43 + 'px',
        }">
          <slot name="newjiahaoicon">
            <span :style="OfficeGlobal.homenewjiahao">
              <i class="appIcon-iconfont appIcon-tianjia"></i>
            </span>
          </slot>
        </li>
        <li v-show="homeshow" v-for="(item, index) in dataList" :key="index" class="ulli" :class="[
          currentMultipleList
            .map((val) => {
              return val.officeId;
            })
            .includes(item.officeId)
            ? 'multiple_select'
            : '',
        ]" :style="{
            margin: OfficeGlobal.homesharelimargin
              ? OfficeGlobal.homesharelimargin + 'px'
              : '20px',
            width: imgwidth + 'px',
          }" @contextmenu.prevent.stop="itemClickRight($event, item)">
          <!-- :style="`background:${item.params.bgColor}`" -->
          <div class="box conentbox" :style="`height:${height}px`" @click.stop="cardItemCilck(item)">
            <!-- <img src="https://img1.baidu.com/it/u=3384796346,381674655&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" /> -->
            <!-- <el-image :key="url" :src="item.officeThumbnailContent == null ? '' : item.officeThumbnailContent" alt=""
							lazy /> -->
            <img @error="imgLoadError($event, item)" v-lazy="
              item.fileAvatar == null
                ? ''
                : item.fileAvatar
            " alt="" />
            <div class="bianji" :style="{
              fontSize: OfficeGlobal.homebianjiiconfz
                ? OfficeGlobal.homebianjiiconfz
                : '15px',
            }" @click.stop="editPage(item)">
              <i class="appIcon-iconfont appIcon-bianji-xin"></i>
            </div>
            <!-- <div class="checkbox groupbox" @click="checkboxChange(item.officeContentId)" v-if="showCheckbox">
                            <i class="appIcon-iconfont appIcon-weixuan check-icon" v-if="!checkboxValue.has(item.officeContentId)"></i>
                            <i class="appIcon-iconfont appIcon-duoxuan check-icon" v-if="checkboxValue.has(item.officeContentId)"></i>
                        </div> -->
            <!-- <div class="edit">
                            <dd class="listRestore" @click="huanyuanFn">
                                <i class="appIcon-iconfont appIcon-guanbijianli"></i>
                            </dd>
                            <dd class="listRestore" @click="shanchuFn">
                                <i class="appIcon-iconfont appIcon-a-trash11"></i>
                            </dd>
                        </div> -->
            <!-- <div class="mask"></div> -->
            <dl class="head_imgportrait" @click.stop="shareMember(item)">
              <!-- {{ item.ownerSharerList?.length }} -->
              <!-- <span>123456</span> -->
              <span v-for="(sub_item, sub_index) in item.ownerSharerList?.length > 5
              ? item.ownerSharerList.slice(0, 5)
              : item.ownerSharerList" :key="sub_index">
                <img v-lazy="sub_item.userAvatar" alt="" />
              </span>
              <!-- 超过5个时显示 -->
              <div v-if="item.ownerSharerList?.length > 5" class="head_mask"
                :style="{ 'z-index': item.ownerSharerList.length + 1 }">
                +{{ item.ownerSharerList.length - 5 }}
              </div>
            </dl>
          </div>

          <dl class="name_inp" :style="{ justifyContent: OfficeGlobal.hometitlejustifyContent }">
            <input v-if="npmeInp == 'inpname_' + item.officeId" :id="'inpname_' + item.fileName" class="name_inp_inp"
              :class="{ inpshuru: npmeInp == 'inpname_' + item.officeId }" v-model="item.fileName"
              @keyup.enter="editTitle(item)" @blur="editTitle(item)" @focus="focusTitle(item)" maxlength="10" :style="{
                fontSize: OfficeGlobal.homesharetitlefontsize,
                color: OfficeGlobal.homesharetitlecolor,
              }" />
            <span v-else @click.stop="textFocus(item.officeId)" class="inp_span" :style="{
              fontSize: OfficeGlobal.homesharetitlefontsize,
              color: OfficeGlobal.homesharetitlecolor,
            }">{{ item.fileName }}</span>
            <i v-if="npmeInp == null" class="appIcon-iconfont appIcon-bianji icon-zhongmingming"
              @click.stop="textFocus(item.officeId)" :style="{ fontSize: OfficeGlobal.sharetitleiconfz }"></i>
            <!-- <p>{{ item.officeTitle }}</p> -->
          </dl>
        </li>
        <!-- <div v-show="waitetime" class="waitetimeli">正在加载请等待</div> -->
        <!-- <div v-show="titlenone" class="titlenoneli">暂未搜索到内容</div> -->
      </ul>
    </div>
    <!-- 移动到最下方显示加号 -->
    <div class="newonejiahao" v-show="scoll > 10 && OfficeGlobal.homehomebottomjiahao">
      <div class="newone" @click="createContent">
        <i class="appIcon-iconfont appIcon-xinjian"></i>
      </div>
      <div class="title">新增</div>
    </div>
    <!-- 列表模式 -->
    <div class="del_listlist" v-if="props.home == 'home' && type == 2">
      <ul>
        <li v-for="(item, index) in dataList" :key="index" @contextmenu.prevent.stop="itemClickRight($event, item)">
          <div class="left">
            <img v-lazy="
              item.fileAvatar == null
                ? ''
                : item.fileAvatar
            " alt="" @click.stop="cardItemCilck(item)" />
            <dl class="list_name_inp">
              <input v-if="npmeInp == 'inpname_' + item.officeId" :id="'inpname_' + item.officeId" class="name_inp_inp"
                v-model="item.fileName" @blur="editTitle(item)" @focus="focusTitle(item)" maxlength="10" :style="{
                  fontSize: OfficeGlobal.homesharetitlefontsize,
                  color: OfficeGlobal.homesharetitlecolor,
                }" />
              <span v-else @click.stop="textFocus(item.officeId)" class="inp_span" :style="{
                fontSize: OfficeGlobal.homesharetitlefontsize,
                color: OfficeGlobal.homesharetitlecolor,
              }">{{ item.fileName }}</span>
            </dl>
          </div>
          <div class="center"></div>
          <div class="right">
            <div class="bianji" :style="{
              fontSize: OfficeGlobal.homebianjiiconfz
                ? OfficeGlobal.homebianjiiconfz
                : '15px',
            }" @click.stop="editPage(item)">
              <i class="appIcon-iconfont appIcon-bianji-xin"></i>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <memberSelect :visible="membersShow" @closeVisible="closeVisible" :comefrom="'home'"
      :currentItemProps="currentActionInfo.currentItemInfo"></memberSelect>
    <DelVue :delshow="delshow" @shanchu="shanchuFn" :deltexttitle="warringText"></DelVue>
  </div>
</template>
<script lang="ts" setup>
import OfficeGlobal from "@/utils/officeglobal";
import { useRouter } from "vue-router";
import useExport from "@/hooks/useExport";
import memberSelect from "../officeMemberShare/memberSelect.vue";
import rightMenuComponent from "../OfficeRightMenu/rightMenu.vue";
import DelVue from "../OfficeShare/Del.vue";
import { useMainStore, useSlidesStore } from "@/store";
import { storeToRefs } from "pinia";

import {
  reactive,
  watch,
  onMounted,
  ref,
  nextTick,
  defineEmits,
  defineProps,
} from "vue";
import {
  deleteContent,
  deleteContentList,
  getCcontentList,
  addCcontent,
  pasteFilepost,
  editSpaceOffice,
  editorEditor,
  delEditor,
  deleteFiles,
} from "@/api/content";
import {
  videoImageList
} from "@/api/editor";
// import defaultImg from "@/assets/images/card_default.png";
const router = useRouter();
const props = defineProps([
  "folderId", //文件夹id   -1 为全部文件
  "officeFileType", //类型：1：文件夹；2：文件；3：标签
  "url",
  "home",
]);
const emits = defineEmits(["toEditPage", "previewEvent"]);

const mainStore = useMainStore();
const slidesStore = useSlidesStore();
const { folderID } = storeToRefs(mainStore);

const { exporting, exportJSON, exportPPTX } = useExport();

const warringText = ref("");

const waitetime = ref(false); // 获取列表时需要等待
const titlenone = ref(false); // 搜索时为搜索到
const sousuostop = ref(false); // 点击关闭搜索按钮时控制一个变量阻止头部消失
const dataListcopy = ref(); // 复制请求数据列表

const dataList = ref(); // 数据列表
const officeFileType = ref(props.officeFileType || 2); // 文件类型 1:文件夹 2:文件 3：标签
const sousuo = ref<boolean>(false); // 是否显示搜索框
const searchValue = ref(""); // 搜索框内容
const imgwidth = ref(); // 默认高度
let height = ref(); // 默认高度
const type = ref(1); // 判断列表展示模式 1 图标模式 2 列表模式
const npmeInp = ref<any>(null); // 判断是否点击重命名
const itemTitle = ref<any>(""); // 标题名字暂存 标题为空时显示原名称
const morevisible = ref<boolean>(false); // 点击按钮后关闭弹出层
const officeSortRule = ref(2); // 排序规则
const officeSortType = ref(2); // 排序类型
const delshow = ref(false); // 控制删除组件弹出框
let postId = ref([]); // 多个删除数组列表
const show = ref(false);
const homenonetype = ref(false); // 首页无数据时显示添加数据
const homeshow = ref(false); // 首页是否有数据

const paixulistData = [
  { item: "创建时间", index: 1 },
  { item: "修改时间", index: 2 },
  { item: "名称排序", index: 4 },
]; // 排序列表
// { item: '自定义排序', index: 3 }

// 右键菜单属性
const menuPosX: any = ref(0); //右键菜单水平位置
const menuPosY: any = ref(0); //右键菜单垂直位置
const globalRightMenuShow = ref(false); // 全局的右键菜单显示
const itemMenuShow = ref(false); // 列表或者卡片的右键菜单显示
const isMoreSelect = ref(false); //当前是否有多选 全选操作
const ctrlDown = ref(false); //ctrl或command 是否被按下
const isCoppied = ref(false); //当前是否有复制的文件
const membersShow = ref(false); //显示分享人员滑块儿
const fareurl = ref(""); // 链接地址

const currentActionInfo: any = reactive({
  currentItemInfo: {},
});
const currentMultipleList: any = reactive([]);
onMounted(async () => {
  // 清除协同显示的在线人员列表
  localStorage.removeItem("ownerSharerList");
  await getDataList();
  // 监听键盘事件
  document.addEventListener("keydown", (event: any) => {
    //  || arguments.callee.caller.arguments[0]
    let e = event || window.event;
    // 按下ctrl或command
    if ((e && e.keyCode == 17) || e.keyCode == 91) {
      ctrlDown.value = true;
    }
  });
  // 监听松开键盘事件
  document.addEventListener("keyup", (event: any) => {
    //  || arguments.callee.caller.arguments[0]
    let e = event || window.InputEvent;
    // ctrl或command 松开
    if ((e && e.keyCode == 17) || e.keyCode == 91) {
      // enter 键
      ctrlDown.value = false;
    }
  });
  // 监听滚动事件
  document
    .getElementById("scorl")
    ?.addEventListener("scroll", handleScrolltop, true);
  const empt = [
    {
      id: "10000000",
      elements: [],
      background: {
        type: "solid",
        color: "#ffffff",
      },
    },
  ];
  slidesStore.setSlides(JSON.parse(JSON.stringify(empt)));
});
// 计算图高度
const getBoxHeight = () => {
  const div: any = document.querySelector(".del_chartlist>ul");
  const widthlist = div.clientWidth || div.offsetWidth || div.scrollWidth;
  imgwidth.value =
    widthlist / OfficeGlobal.homesharelinumber -
    OfficeGlobal.homesharelimargin -
    OfficeGlobal.homesharelimargin;
  height.value = imgwidth.value * OfficeGlobal.homeshareproportion;
};
// 滚动事件是否显示底部按钮
const scoll = ref(0); // 滚动距离
const handleScrolltop = () => {
  const work: any = document.getElementById("scorl");
  scoll.value = work.scrollTop;
};
const createContent = () => {
  router.push({
    path: '/freeeditor',
    query: {
      operate: 1,
    }
  })
  // const params = {
  //   officeFileType: 2, //文件类型：1：文件夹；2：文件；3：标签
  //   officeOwnership: 1,
  //   // "officeParentId": 0,
  //   officeLabelId: 0,
  //   officeTitle: "未命名",
  //   officeType: OfficeGlobal.officeType,
  //   officeWidth: 1000,
  //   officeHeight: 580,
  // };
  // addCcontent(params).then((res: any) => {
  //   const pId = res.data.data;
  //   if (pId) {
  //     let pptName: any = ref();
  //     emits("toEditPage", { officeTitle: pptName.value, officeId: pId }, "0");
      
  //   }
  // });
};

// 获取列表
const getDataList = () => {
  waitetime.value = true; // 获取列表时需要等待
  titlenone.value = false; // 搜索时未找到重置
  homenonetype.value = false;
  homeshow.value = false;
  show.value = false;
  const params = {
    fileType: 11,
    pageNum: 1,
    pageSize: 999999,
    hhxsUserId: JSON.parse(localStorage.getItem('userInfo')).hhxsUserId,
    uploadUserId: JSON.parse(localStorage.getItem('userInfo')).hhxsUserId,
  };
  videoImageList(params).then((res: any) => {
    dataList.value = res.data.data.list;
    dataListcopy.value = res.data.data.list;
    if (res.data.data.total == 0) {
      homenonetype.value = true;
      if (searchValue.value.length > 0) {
        titlenone.value = true; // 搜索未找到显示
        waitetime.value = false; // 列表请求完关闭
      }
    } else {
      homenonetype.value = false;
      homeshow.value = true;
      waitetime.value = false; // 列表请求完关闭
      sousuostop.value = false; // 请求结束后重置搜索点击关闭事件
      getBoxHeight();
      window.addEventListener("resize", () => {
        type.value === 1 ? getBoxHeight() : "";
      });
    }
    show.value = true;
  });
};
// 排序点击事件
const paixuFn = (item: any) => {
  officeSortRule.value = item.index;
  if (officeSortType.value == 1) {
    officeSortType.value = 2;
  } else {
    officeSortType.value = 1;
  }
  getDataList();
};
// 列表切换点击事件
const changetype = (i: any) => {
  type.value = i;
};
// 点击搜索事件
const sousuoFn = (event: any) => {
  sousuo.value = !sousuo.value;
  if (sousuo.value) {
    document.getElementById("sousuoinp")?.focus();
  } else {
    searchValue.value = "";
    sousuostop.value = true; // 点击关闭搜索按钮时控制一个变量阻止头部消失
  }
};
// 监听搜索事件,进行搜索请求
watch(
  () => searchValue.value,
  (newValue, oldValue) => {
    if (newValue) {
      dataList.value = dataListcopy.value;
      dataList.value = dataList.value.filter((item: any) => {
        return item.fileName.indexOf(newValue) != -1;
      });
    } else {
      dataList.value = dataListcopy.value;
    }
    // getDataList()
  }
);

watch(
  () => props.folderId,
  (newValue, oldValue) => {
    sousuo.value = false;
    searchValue.value = "";
    getDataList();
  }
);

const hideRightMenu = (falg: any) => {
  itemMenuShow.value = false;
  globalRightMenuShow.value = false;
};
defineExpose({ hideRightMenu });
// 聚焦事件
const focusTitle = (item: any) => {
  itemTitle.value = item.officeTitle;
};
// 进入编辑界面
const editPage = (item: any) => {
  emits("toEditPage", item, "0");

  // toEdietPage(item.officeTitle, item.officeId)
};
// 进入预览界面
// const toPreviewPage = (id: any) => {
// 	router.push({
// 		path: '/freeeditor',
// 		query: {
// 			wid: id,
// 			screen: '1'
// 		}
// 	})
// }
const imgLoadError = (e: any, info: any) => {
  // info.officeThumbnailContent = defaultImg;
};
// 复制文件
const copyFile = () => {
  itemMenuShow.value = false;
  isCoppied.value = true;
};
// 粘贴事件
const paste = () => {
  if (currentActionInfo.currentItemInfo.officeId) {
    let params = {
      targetId: props.folderId == -1 ? 0 : props.folderId, //目标目录ID
      sourceOfficeId: currentActionInfo.currentItemInfo.officeId,
      officeFileType: officeFileType.value, //目标类型：1：文件夹；3：标签
    };
    pasteFilepost(params).then((res: any) => {
      itemMenuShow.value = false;
      globalRightMenuShow.value = false;
      currentActionInfo.currentItemInfo = {};
      isCoppied.value = false;
      getDataList();
    });
  }
};
const toEdietPage = (name: any, id: any) => {
  router.push({
    path: "/freeeditor",
    query: {
      wid: id,
      name: name,
      screen: "0",
    },
  });
};
// 点击名字重命名
const textFocus = (item: any) => {
  if (props.home == "del") return;
  if (item == "youji") {
  } else {
    npmeInp.value = "inpname_" + item;
    nextTick(() => {
      document.getElementById("inpname_" + item)?.focus();
      morevisible.value = false;
    });
  }
};
// 失焦事件
const editTitle = (item: any) => {
  npmeInp.value = null;
  if (item.officeTitle == itemTitle.value) {
    return;
    // console.log(item.officeTitle, "第一个", itemTitle.value);
  } else {
    // console.log(item.officeTitle, "第二个", itemTitle.value);
    if (item.officeTitle === "") {
      let params = {
        appFileInfoId: item.appFileInfoId,
        fileName: itemTitle.value,
        fileType: 11,
        officeFlag: 1,
      };
      // appFileInfoId: pptid.value,
      //       fileAvatar: res,
      //       fileType: 11,
      //       officeFileContent: JSON.stringify(slides.value),
      //       officeFlag: 1,
      //       fileName: title.value+'.flse',
      editorEditor(params).then((res: any) => {
        getDataList();
      });
    } else {
      let params = {
        offappFileInfoIdiceId: item.appFileInfoId,
        fileName: item.fileName,
        fileType: 11,
        officeFlag: 1,
      };
      editorEditor(params).then((res: any) => {
        getDataList();
      });
    }
  }
};
// 删除一个
const deleteItem = () => {
  warringText.value = "确定删除当前内容吗？";
  itemMenuShow.value = false;
  delshow.value = true;
};

// 全选-多选删除
const deleteSeleted = () => {
  warringText.value = "确定删除当前所选内容吗？";
  itemMenuShow.value = false;
  delshow.value = true;
};
const xiazaipptx = () => {
  exportPPTX();
};
// 没方法
const xiazaipdf = () => {
  // console.log("下载pdf没方法");
};
// 下载jpg没方法!!!!!!!!!!!!!!!!!!!!!!!!!和内部方法不一样
const xiazaijpg = async () => {
  console.log("下载jpg没方法");
};

// 右键菜单列表
const menuList = reactive({
  globalMenu: [
    {
      title: "刷新",
      eventName: "refurbish",
      eventEmitParent: true,
      id: 1,
    },
    {
      title: "新建",
      eventName: "newCreate",
      eventEmitParent: true,
      id: 2,
    },
  ],
  listItemMenu: [
    // {
    //   title: "共享成员",
    //   eventName: "menuShareMember",
    //   eventEmitParent: true,
    //   subMenuType: "",
    //   isShow: true,
    //   id: 1,
    // },
    {
      title: "分享链接",
      eventName: "",
      subMenuType: "shareLink",
      eventEmitParent: true,
      isShow: true,
      id: 2,
    },
    // {
    // 	title: '下载',
    // 	eventName: '',
    // 	eventEmitParent: true,
    // 	subMenuType: 'download',
    // 	isShow: true,
    // 	subMenu: [
    // 		{
    // 			title: '导出PPTX',
    // 			eventName: 'xiazaipptx',
    // 			eventEmitParent: true,
    // 		},
    // 		// {
    // 		// 	title: '导出图片',
    // 		// 	eventName: 'xiazaijpg',
    // 		// 	eventEmitParent: true,
    // 		// }
    // 	],
    // 	id: 4
    // },
    // {
    //   title: "复制",
    //   eventName: "copyFile",
    //   subMenuType: "",
    //   eventEmitParent: true,
    //   isShow: true,
    //   id: 5,
    // },
    {
      title: "重命名",
      eventName: "reName",
      subMenuType: "",
      eventEmitParent: true,
      isShow: true,
      id: 6,
    },
    {
      title: "删除",
      eventName: "deleteItem",
      subMenuType: "",
      eventEmitParent: true,
      isShow: true,
      id: 7,
    },
  ],
});

// 全局单击事件
const glabalClickEvent = () => {
  itemMenuShow.value = false;
  globalRightMenuShow.value = false;
  isMoreSelect.value = false;
  currentMultipleList.length = 0;
};
// 最外层右键事件
const globalClickRight = (e: any) => {
  let menuNum = document.querySelectorAll(
    ".rightMenuid>.global_menu>ul>li"
  ).length;
  let menuHeight = menuNum * 40 + 30;
  let windowHeight =
    window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight;
  menuPosX.value = e.pageX;
  menuPosY.value =
    windowHeight - e.pageY < menuHeight ? windowHeight - menuHeight : e.pageY;
  itemMenuShow.value = false;
  globalRightMenuShow.value = true;
};

// 卡片单击事件
const cardItemCilck = (item: any) => {
  if (ctrlDown.value) {
    if (
      currentMultipleList.findIndex(
        (citem: any) => citem.officeId == item.officeId
      ) == -1
    ) {
      currentMultipleList.push(...[item]);
    } else {
      currentMultipleList.splice(
        currentMultipleList.findIndex(
          (citem: any) => citem.officeId == item.officeId
        ),
        1
      );
    }
    if (currentMultipleList.length > 1) {
      isMoreSelect.value = true;
    } else {
      isMoreSelect.value = false;
    }
  } else {
    emits("previewEvent", item, "1");
    // toPreviewPage(item.officeId)
  }
};
// 列表卡片右键事件
const itemClickRight = (e: any, item: any) => {
  let menuNum = document.querySelectorAll(
    ".rightMenuid>.item_menu>ul>li"
  ).length;
  let menuHeight = menuNum * 40 + 30;
  let windowHeight =
    window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight;
  currentActionInfo.currentItemInfo = item;
  menuPosX.value = e.pageX;
  menuPosY.value =
    windowHeight - e.pageY < menuHeight ? windowHeight - menuHeight : e.pageY;
  itemMenuShow.value = true;
  //  获取URL地址
  const url = `${window.location.origin}/freeeditor/#/freeeditor?appFileInfoId=${currentActionInfo.currentItemInfo.appFileInfoId}&screen=1`;
  fareurl.value = url;
};
// 关闭分享人员列表滑块儿
const closeVisible = (evt: any, flag: any) => {
  if (flag) {
    getDataList();
  }
  membersShow.value = false;
};
// 右键菜单事件
// 右键菜单出现分享成员弹窗
const menuShareMember = () => {
  // currentActionInfo.currentItemInfo =
  itemMenuShow.value = false;
  shareMember(currentActionInfo.currentItemInfo);
};

// 点击出现分享成员弹窗
const shareMember = (item: any) => {
  currentActionInfo.currentItemInfo = item;
  membersShow.value = true;
};

// 右键刷新事件
const refurbish = () => {
  globalRightMenuShow.value = false;
  isMoreSelect.value = false;
  currentMultipleList.length = 0;
  getDataList();
};

// 新建
const newCreate = () => {
  globalRightMenuShow.value = false;
  currentMultipleList.length = 0;
  isMoreSelect.value = false;
  createContent();
};
// 取消多选  全选
const cancleSelect = () => {
  globalRightMenuShow.value = false;
  currentMultipleList.length = 0;
  itemMenuShow.value = false;
  isMoreSelect.value = false;
};
// 重命名
const reName = () => {
  itemMenuShow.value = false;
  textFocus(currentActionInfo.currentItemInfo.officeId);
};

// 全选事件
const selectAll = () => {
  isMoreSelect.value = true;
  globalRightMenuShow.value = false;
  currentMultipleList.push(...dataList.value);
  itemMenuShow.value = false;
};
// 删除事件
const shanchuFn = (i: boolean) => {
  if (i) {
    // 多选、全选
    if (isMoreSelect.value) {
      let params = {
        // officeIdList: currentMultipleList.map((item: any) => {
        //   return item.officeId;
        // }),
        appFileInfoIds: currentMultipleList.map((item: any) => {
          return item.appFileInfoId;
        }),
        logicDelete: 1
      };
      deleteFiles(params).then((res: any) => {
        getDataList();
        delshow.value = false;
        currentMultipleList.length = 0;
        isMoreSelect.value = false;
      });
    } else {
      let params = {
        appFileInfoIds: [currentActionInfo.currentItemInfo.appFileInfoId],
        hhxsFileDeleteVo: {},
        logicDelete: 1
      };
      deleteFiles(params).then((res: any) => {
        delshow.value = false;
        getDataList();
        currentMultipleList.length = 0;
        isMoreSelect.value = false;
      });
    }
  } else {
    delshow.value = false;
  }
};
</script>
<style lang="scss" scoped>
.multiple_select {
  // box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .5) !important;
  border: 1px solid #7a84ff !important;
  // box-sizing: border-box;
}

.deletebox {
  width: 100%;
  height: 100%;
  position: relative;

  .newonejiahao {
    position: absolute;
    bottom: 20px;
    right: 60px;
    width: 48px;
    height: 48px;
    box-shadow: 0px 10px 20px 0px rgba(70, 74, 135, 0.2);
    background: #fff;
    border-radius: 24px;
    cursor: pointer;

    &:hover .title {
      // width: auto;
      display: block;
      // padding: 14px;
    }

    .newone {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #9eabe8;
    }

    .title {
      position: absolute;
      padding: 14px;
      top: 3px;
      left: -70px;
      background-color: #0b2239;
      border-radius: 8px;
      color: #fff;
      display: none;
      z-index: 15;
    }
  }

  .del_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .del_topleft,
  .del_topcenter,
  .del_topright {
    width: auto;
  }
}

.del_topleft {
  .empty {
    width: 88px;
    height: 42px;
    background: #fff;
    border: 1px solid rgba(230, 229, 255, 1);
    box-shadow: 0px 10px 30px 0px rgba(122, 132, 255, 0.1);
    border-radius: 10px;
    color: #9eabe8;
    font-size: 18px;

    span {
      margin: 0 0 0 6px;
    }
  }
}

.del_topright {
  display: flex;
  // padding-right: 20px;
  justify-content: flex-end;

  .sousuoxin {
    display: flex;
    margin-right: 10px;
    align-items: center;
    position: relative;

    #sousuoinp {

      // color: rgba(158, 171, 231, 1);
      &::-webkit-input-placeholder {
        /* WebKit browsers */
        // color: #4355dc;
        // background-color: #f9f7f7;
        font-size: 16px;
        padding-left: 10px;
      }
    }

    i {
      color: #cfd0d9;
    }

    .shareTopinp {
      width: 0;
      height: 42px;
      border: none;
      outline: none;
      margin-right: -42px;
      z-index: 3;
      border-radius: 21px;
      transition: all 0.5s ease-in-out;
      // display: none;
      background: transparent;
      color: #fff;
    }

    .searchclass {
      width: 42px;
      height: 42px;
      // background: rgb(170, 81, 81);
      border-radius: 21px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 5;
      transition: all 0.3s;
      box-shadow: 0 0 20px 0 rgba(104, 108, 232, 0.15);

      &:hover {
        cursor: pointer;

        // border: 1px solid rgba(243, 243, 255, 1);
        i {
          color: #fff;
        }

        background-color: #4355dc;
      }
    }

    .inpxin {
      width: 200px;
      height: 42px;
      padding: 0 42px 0 10px;
      box-shadow: 0 0 30px 0 rgba(104, 108, 232, 0.1);
    }
  }

  .list_chart {
    width: 42px;
    height: 42px;
    margin: 0 10px;
    // background: rgb(180, 95, 95);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.3s;
    box-shadow: 0 0 20px 0 rgba(104, 108, 232, 0.15);

    i {
      color: #cfd0d9;
    }

    &:hover {
      background: #4355dc;
      cursor: pointer;

      i {
        color: #fff;
      }

      .toolpaixu {
        display: block;
      }
    }

    .toolpaixu {
      display: none;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 20px;
      transition: all 0.8s ease-in-out;
      padding-top: 30px;
      width: 250%;
      z-index: 10;

      .toolpaixuul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0px 4px 20px 0px rgba(87, 98, 253, 0.13);
        padding: 10px;
        border-radius: 10px;
        background-color: #1b1e23;

        .toolpaixuli {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 8px 0;

          dd {
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
          }

          &:hover {
            cursor: pointer;
            background: #242b3e;
            border-radius: 8px;
          }
        }
      }
    }
  }
}

// 图表
.del_chartlist {
  overflow: hidden;
  padding: 0 20px;
  height: calc(100% - 50px);

  ul {
    height: 100%;
    overflow-y: scroll;
    margin: 10px 0;
    padding-bottom: 80px;
  }

  li {
    float: left;
    margin: 20px;
    box-sizing: border-box;
    // width: calc(20% - 40px);
    box-shadow: 0 0 30px 0 rgba(47, 50, 134, 0.1);
    border-radius: 16px;
    background: #181a1e;
    transition: 0.8s all ease;
    overflow: hidden;
    text-align: center;
    border: 1px solid #070809;

    &:hover {
      transform: scale(1.05);
      cursor: pointer;

      .homenew,
      span {
        border-radius: 50%;
      }
    }

    .box {
      background-size: cover;
      width: 100%;
      border-radius: 16px;
      position: relative;
      overflow: hidden;
      background-color: #fff;

      &:hover {

        .view,
        .edit {
          opacity: 1;
        }

        .bianji {
          transform: translate(0, 0);
        }
      }

      .bianji {
        position: absolute;
        top: 0;
        right: 0;
        width: 46px;
        height: 40px;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0px 10px 40px 0px rgba(153, 148, 178, 0.15);
        border-radius: 0px 14px 0px 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4355dc;
        font-size: 20px;
        transform: translate(46px, -40px);
        transition: all 0.3s;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        // object-position: top;
      }

      .mask {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        left: 0;
        top: 0;
        border-radius: 16px;
        z-index: 8;
        opacity: 0;
      }

      .view {
        position: absolute;
        right: 65px;
        bottom: 10px;
        display: flex;
        z-index: 9;
        opacity: 0;

        dd {
          width: 30px;
          height: 30px;
          background: #fff;
          border-radius: 8px;
          color: #afacc7;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 10px;
          cursor: pointer;
        }
      }

      .edit {
        position: absolute;
        right: 20px;
        bottom: 10px;
        display: flex;
        z-index: 9;
        opacity: 0;

        dd {
          width: 30px;
          height: 30px;
          background: #fff;
          border-radius: 8px;
          color: #afacc7;
          text-align: center;
          line-height: 30px;
          margin-left: 10px;
          cursor: pointer;
        }

        .listRestore:hover {
          color: #7a84ff;
        }
      }
    }

    .name_inp {
      text-align: initial;
      height: 44px;
      font-size: 17px;
      line-height: 44px;
      padding: 0 15px;
      display: flex;
      align-items: center;
      justify-content: normal;

      .inpshuru {
        border: 1px solid red;
      }

      &:hover .icon-bianji {
        display: block;
      }

      .name_inp_inp {
        background-color: transparent;
        border: none;
        outline: none;
        text-align: center;
        width: 100%;
        height: 35px;
        font-size: 18px;
        // border: 1px solid red;

        &:hover {
          cursor: default;
        }

        &:focus {
          background-color: #fff;
          color: #000;
          // border: none;
          // outline: none;
          border: 1px solid rgba(122, 132, 255, 1);
          box-shadow: 0px 10px 30px 0px rgba(122, 132, 255, 0.1);
          border-radius: 8px;
        }
      }

      .inp_span {
        font-size: 18px;
        // margin-left: 10px;
        color: #ffffff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .icon-bianji {
        display: none;
        // color: #7a84ff;
        cursor: pointer;
        color: #ffffff;
      }
    }

    .head_imgportrait {
      position: absolute;
      bottom: 18px;
      left: 24px;
      display: flex;
      z-index: 9;

      span {
        width: 32px;
        height: 32px;
        // display: inline-block;
        border-radius: 50%;
        // background-color: red;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #fff;
        transition: all 0.3s;
        margin-left: -8px;

        img {
          object-fit: scale-down;
          width: 100%;
          border-radius: 50%;
        }

        &:hover {
          margin-right: 8px;
          // cursor: pointer;
        }
      }

      .head_mask {
        position: absolute;
        right: -24px;
        width: 32px;
        height: 32px;
        font-size: 14px;
        border-radius: 50%;
        background: #f6f8fb;
        border: 1px solid rgba(255, 255, 255, 0.6);
        color: #7a8bbf;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .homenew {
    background-color: #181a1e;
    display: flex;
    align-items: center;
    justify-content: center;

    span {
      width: 46px;
      height: 46px;
      transform: rotate(45deg);
      background: #4355dc;
      // box-shadow: 2px 0px 4px 0px rgba(255, 255, 255, 0.5);
      // box-shadow: 0px 4px 5px 0px rgba(122, 132, 255, 0.3);
      box-shadow: 0 8px 20px 0 rgba(122, 132, 255, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 16px;
      color: #fff;
      transition: all 0.3s;
      cursor: pointer;

      i {
        transform: rotate(45deg);
      }
    }
  }
}

// 列表部分
.del_listlist {
  overflow: hidden;
  padding: 0 20px;
  height: calc(100% - 50px);

  ul {
    height: 100%;
    overflow-y: auto;
    padding: 10px 20px 5px;

    li {
      width: 100%;
      height: 81px;
      border-radius: 15px;
      padding: 14px 10px;
      transition: all 0.3s;
      display: flex;

      img {
        width: 63px;
        height: 53px;
        object-fit: cover;
        border-radius: 15px;
        margin-right: 10px;
      }

      .left {
        width: 33.33%;
        display: flex;
        align-items: center;
      }

      .center {
        width: 33.33%;
      }

      .right {
        width: 33.33%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 20px;

        .bianji {
          color: #cfd0d9;
        }

        .bianji:hover {
          cursor: pointer;
          color: #4355dc;
        }
      }

      &:hover {
        background: #181a1e;
        box-shadow: 0px 2px 10px 0px rgba(3, 7, 31, 21%);
      }
    }
  }

  .list_name_inp {
    font-size: 18px;
    color: #fff;
  }

  .name_inp_inp {
    background-color: transparent;
    border: none;
    outline: none;
    text-align: center;
    width: 100%;
    height: 35px;
    font-size: 18px;
    // border: 1px solid red;

    &:hover {
      cursor: default;
    }

    &:focus {
      background-color: #fff;
      color: #000;
      // border: none;
      // outline: none;
      border: 1px solid rgba(122, 132, 255, 1);
      box-shadow: 0px 10px 30px 0px rgba(122, 132, 255, 0.1);
      border-radius: 8px;
    }
  }
}

.homenone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  .homenone_box {
    width: 25%;

    img {
      width: 100%;

      &:hover {
        cursor: pointer;
      }
    }
  }
}

// 获取列表时等待
.waitetimeli {
  color: red;
  font-size: 18px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
<style lang="scss">
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: transparent;
}
</style>
